<template>
	<view class="mainpadding" style="padding-bottom: 150rpx;">
		<view class="flexbetween ffffff radius margin_top mainpadding">
			<view class="ershib"style="min-width: 160rpx;">姓名</view>
			<input class="inputs " type="text" style="text-align: right;" placeholder="请输入真实姓名" v-model="real_name">
		</view>
		<view class="flexbetween ffffff radius margin_top mainpadding">
			<view class="ershib" style="min-width: 160rpx;">身份证号</view>
			<input class="inputs " type="text" style="text-align: right;" placeholder="请输入身份证号" v-model="idcard">
		</view>

		<view class="flexbetween ffffff radius margin_top mainpadding">
			<view class="ershib" style="min-width: 200rpx;">性别</view>
			<u-radio-group v-model="gender" placement="row" circle>
				<u-radio activeColor="#1ba95b" :customStyle="{marginRight: '30rpx'}" label="男" name="1"></u-radio>
				<u-radio activeColor="#1ba95b" label="女" name="2"></u-radio>
			</u-radio-group>
		</view>
		<view class="flexbetween ffffff radius margin_top mainpadding" @click="gjshow=true">
			<view class="ershib"style="min-width: 160rpx;">国家</view>
			<view class="flexright">
				<input class="inputs margin_right" type="text" style="text-align: right;" disabled placeholder="请选择国家"
					v-model="gj_text">
				<u-icon name="arrow-right" size="16" color="#333"></u-icon>
			</view>
		</view>
		<view class="flexbetween ffffff radius margin_top mainpadding" @click="zjlxshow=true">
			<view class="ershib"style="min-width: 160rpx;">证件类型</view>
			<view class="flexright">
				<input class="inputs margin_right" type="text" style="text-align: right;" disabled="" placeholder="请选择证件类型"
					v-model="zjlx_text">
				<u-icon name="arrow-right" size="16" color="#333"></u-icon>
			</view>
		</view>
		<!-- <view class="sanshier nofonweight xiaohei margin_top">
			请拍摄并上传您的身份证照片
		</view> -->
		<!-- <view class="margin_top">
			<view class="" v-show="!idcard_zimage">
				<view class="shangcbox" @click="uploadImg(1)">
					<view class="">
						<view class="flexcenter">
							<u-icon name="plus-circle-fill" color="#777777" size="30"></u-icon>
						</view>
						<view class="ershil nofonweight xiaohui margin_top2 textcenter">拍摄正面</view>
					</view>
				</view>
			</view>
			<view class="shangc" v-show="idcard_zimage"  @click="uploadImg(1)">
				<image :src="idcard_zimage_text" mode=""></image>
			</view>
			<view class=""  v-show="!idcard_fimage">
				<view class="shangcbox margin_top" @click="uploadImg(2)" >
					<view class="">
						<view class="flexcenter">
							<u-icon name="plus-circle-fill" color="#777777" size="30"></u-icon>
						</view>
						<view class="ershil nofonweight xiaohui margin_top2 textcenter">拍摄反面</view>
					</view>
				</view>
			</view>
			<view class="" v-show="idcard_fimage">
				<view class="shangc margin_top"  @click="uploadImg(2)">
					<image :src="idcard_fimage_text" mode=""></image>
				</view>
			</view>
			
		</view> -->
		<!-- 固定底部 -->
		<view class="mainpadding ffffff gudingdb">
			<view class="bigbtn" @click="submit">提交</view>
		</view>
		<u-picker :show="zjlxshow" title="证件类型" keyName="name" :columns="zjlx_columns" @confirm="zjlxConfirm"
			@cancel="zjlxshow=false"></u-picker>
		<u-picker :show="gjshow" title="国家" keyName="name" :columns="gj_columns" @confirm="gjConfirm"
			@cancel="gjshow=false"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")

	export default {
		data() {
			return {
				zjlx_id: "", //证件类型
				zjlxshow: false,
				zjlx_text: "",
				zjlx_columns:[],
				gj_id: "", //国家
				gjshow: false,
				gj_text: "",
				gj_columns:[],
				gender:"1",
				real_name:"",
				idcard:"",
				idcard_zimage:"",
				idcard_zimage_text:"",
				idcard_fimage:"",
				idcard_fimage_text:"",
			}
		},
		onLoad() {
			this.getgj()
			this.getzjlx()
			this.userinfomsg()
		},
		methods: {
			userinfomsg() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					if(res.data.usersmrz){
						let data = res.data.usersmrz
						this.zjlx_id = data.zjlx_id
						this.zjlx_text = data.zjlx.name
						this.real_name = data.realname
						this.idcard = data.idcard
						this.idcard_zimage = data.idcard_zimage
						this.idcard_zimage_text = data.idcard_zimage_text
						this.idcard_fimage = data.idcard_fimage
						this.idcard_fimage_text = data.idcard_fimage_text
						this.gj_id = data.gj_id
						this.gj_text = data.gj.name
					}
				})
			},
			getzjlx() { // 证件类型
				httpRequest.request('/api/user/zjlxIndex', 'GET', {}).then(res => {
					this.zjlx_columns.push(res.data)
				})
			},
			getgj() { // 国家
				httpRequest.request('/api/user/gjIndex', 'GET', {}).then(res => {
					this.gj_columns.push(res.data)
				})
			},
			zjlxConfirm(e) {
				this.zjlx_id = e.value[0].id
				this.zjlx_text = e.value[0].name
				this.zjlxshow = false
			},
			gjConfirm(e) {
				this.gj_id = e.value[0].id
				this.gj_text = e.value[0].name
				this.gjshow = false
			},
			submit() {
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				if (this.real_name == "") {
					uni.hideLoading()
					httpRequest.toast("请输入真实姓名")
					return
				}
				if (this.idcard == "") {
					uni.hideLoading()
					httpRequest.toast("请输入身份证号")
					return
				}
				if (this.gj_id == "") {
					uni.hideLoading()
					httpRequest.toast("请选择国家")
					return
				}
				if (this.zjlx_id == "") {
					uni.hideLoading()
					httpRequest.toast("请选择证件类型")
					return
				}
				httpRequest.request('/api/user/smrz', 'GET', {
					// 传参
					realname: this.real_name, //真实姓名
					idcard: this.idcard, //身份证号
					idcard_zimage:this.idcard_zimage,
					idcard_fimage:this.idcard_fimage,
					gj_id:this.gj_id,
					zjlx_id:this.zjlx_id,
					gender:this.gender,
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.$emit("editsmrz")
							uni.navigateBack(1)
						}, 1000)
					}
				}).catch(err => {
					uni.hideLoading()
					httpRequest.toast(err.msg);
				})
			},
			uploadImg(val) {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {

						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], val)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], val)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url, val) {
				let _this = this;
				httpRequest.uploadFile('/api/Common/upload', url).then(res => {
					let image_item = res.fullurl;
					if (val == 1) {
						this.idcard_zimage = res.url
						this.idcard_zimage_text = image_item
					}
					if (val == 2) {
						this.idcard_fimage = res.url
						this.idcard_fimage_text = image_item
					}
				}).catch(err => {});
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-radio-group {
		flex: none !important;
	}
</style>
<style lang="scss" scoped>
	.shangcbox {
		width: 686rpx;
		height: 300rpx;
		background: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shangc {
		width: 100%;
		height: 300rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		image {
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			width: 100%;
			height: 100%;
		}
	}
</style>